<template>
  <div @click="openModal($event)">
    <!-- <div v-html="content" @click="openModal($event)"></div> -->
    <v-md-preview :text="content"></v-md-preview>
    <!-- 模态框开始 -->
    <el-dialog
      :visible.sync="modalVisible"
      width="50%"
      center
      :show-close="false"
      @click.prevent="modalVisible = false"
    >
      <img
        :src="modalImageUrl"
        class="img-fluid"
        alt="预览图片"
        style="width: 100%; object-fit: cover; margin: 0 auto; display: block"
      />
    </el-dialog>
    <!-- 模态框结束 -->
  </div>
</template>

<script>
export default {
  name: 'detail',
  props: ['title', 'routerId'],
  data() {
    return {
      content: '',
      modalVisible: false,
      modalImageUrl: '',
    }
  },
  watch: {
    // 监听 title 的变化
    title(newValue, oldValue) {
      this.$axios
        .get('http://localhost:3025/web/api/web_helpDocs', {
          params: {
            filter: {
              where: {
                title: this.title,
              },
            },
          },
        })
        .then((res) => {
          this.content = res[0].mdData
          this.$router.push({ path: '/help', query: { id: res[0].id } })
        })
    },
  },
  mounted() {
    const pagePath = window.location.href
    if (pagePath.includes('id')) {
      this.$axios
        .get('http://localhost:3025/web/api/web_helpDocs', {
          params: {
            filter: {
              where: {
                title: this.$cookies.get('RouterTitle'),
              },
            },
          },
        })
        .then((res1) => {
          this.content = res1[0].mdData
          this.$router.push({
            path: '/help',
            query: { id: res1[0].id },
          })
        })
      this.$axios
        .get('http://localhost:3025/web/api/web_helpDocs/getRouterList')
        .then((res) => {
          let idList = []
          res.forEach((item) => {
            idList.push({
              id: item.id,
              title: item.title,
            })
            if (item?.children.length > 0) {
              item.children.forEach((val) => {
                idList.push({
                  id: val.id,
                  title: val.title,
                })
              })
            }
          })
          idList.forEach((element) => {
            if (element.id == this.$route.query.id) {
              this.$cookies.set('RouterTitle', element.title)
              this.$emit('nowTitle', element.title)
            }
          })
        })
        .catch((err) => {
          console.log('err :>> ', err)
        })
    } else {
      this.$axios
        .get('http://localhost:3025/web/api/web_helpDocs/getRouterList')
        .then((result) => {
          this.content = result[0].mdData
          this.$router.push({ path: '/help' })
        })
        .catch((err) => {
          console.log('err :>> ', err)
        })
    }
  },
  methods: {
    openModal(event) {
      // 检查点击的是否是图片
      if (event.target.tagName === 'IMG') {
        this.modalImageUrl = event.target.src // 获取图片的 URL
        this.modalVisible = true // 打开模态框
      }
    },
  },
}
</script>

<style scoped>
::v-deep .el-dialog {
  width: 80% !important;
  padding: 0;
  background: none;
  box-shadow: none;
}
::v-deep .el-dialog__body {
  padding: 0 !important;
}
::v-deep .el-dialog__header {
  padding: 0 !important;
}
::v-deep .vuepress-markdown-body {
  padding: 20px 32px !important;
  min-height: 82.9vh !important;
}
</style>
